
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>风景 - Laravel Album</title>

    <!-- 加载 CSS -->
    <link href="/xiangce/css/bootstrap.min.css" rel="stylesheet">
    <link href="/xiangce/css/app.css" rel="stylesheet">

      <!-- 加载 js -->
    <script src="/xiangce/js/jquery.min.js"></script>
    <script src="/xiangce/js/bootstrap.min.js"></script>
    <script src="/xiangce/js/masonry.pkgd.min.js"></script>
    <script src="/xiangce/js/imagesloaded.pkgd.min.js"></script>
</head>
<body>

    <!-- bootstrap 导航条 -->
    <nav class="navbar navbar-default">
      <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <!-- LOGO 首页跳转按钮 -->
          <a class="navbar-brand" href="/photo/index">返回首页</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <!-- 导航按钮 此网站不需要 -->
            <!-- <li><a href="#">Link</a></li> -->
          </ul>
        </div>
      </div>
    </nav>

    <!-- bootstrap 容器 -->
    <div class="container">
    <!-- 显示提示消息 -->
    @foreach (['danger', 'warning', 'success', 'info'] as $msg)
      @if(session()->has($msg))
        <div class="flash-message">
          <p class="alert alert-{{ $msg }}">
            {{ session()->get($msg) }}
          </p>
        </div>
      @endif
    @endforeach
    <!-- 网站主体内容 -->
<!-- 相册信息 -->
<div class="row">
    <div class="col-sm-3">
        <img class="img-responsive" src="{{$cover -> coverpicture}}">
    </div>
    <div class="col-sm-8">
        <h2>{{$cover -> name}}</h2>
        <p>{{$cover -> description}}</p>
        <!-- 上传照片：弹出框按钮 -->
         <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#uploadPhoto">
          上传图片
        </button>
        <!-- 编辑相册：弹出框按钮 -->
        <button type="button" class="btn btn-info" data-toggle="modal" data-target="#editAlbum">
          编辑相册
        </button>
        <!-- 删除相册：弹出框按钮 -->
        <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#deleteAlbum">
          删除相册
        </button>
    </div>
</div>
<!-- 上传照片：弹出框 -->
<div class="modal fade" id="uploadPhoto" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">上传图片</h4>
      </div>
      <div class="modal-body">
          <form action="/photo/do-upload" method="post" enctype="multipart/form-data">
            <input type="hidden" name="photos_id" value="{{$coverId}}">
            <div class="form-group">
              <input type="file" name="photo[]" multiple="multiple" required>
            </div>
            <div class="form-group">
                <input type="text" class="form-control" name="name" placeholder="图片名字">
            </div>
            <div class="form-group">
                <input type="text" class="form-control" name="intro" placeholder="图片介绍">
            </div>
            {{ csrf_field() }}
            <button type="submit" class="btn btn-primary">Upload</button>
          </form>
      </div>
    </div>
  </div>
</div>

<!-- 编辑相册：弹出框 -->
<div></div>
<div class="modal fade" id="editAlbum" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">编辑相册</h4>
      </div>
      <div class="modal-body">
          <form class="form-horizontal" action="/photo/edit/{{$cover -> id}}" method="post" enctype="multipart/form-data">
            <div class="form-group">
              <label for="name" class="col-sm-2 control-label">相册名称</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="name" name="name" required value="{{$cover -> name}}">
              </div>
            </div>
            <div class="form-group">
              <label for="intro" class="col-sm-2 control-label">相册介绍</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="intro" name="description" value="{{$cover -> description}}">
              </div>
            </div>
            <!-- 封面图片上传接口 -->
            <div class="form-group">
              <label for="intro" class="col-sm-2 control-label">相册封面</label>
              <div class="col-sm-10">
                <input type="file" name="coverpicture">
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-offset-2 col-sm-10">
              {{csrf_field()}}
                <button type="submit" class="btn btn-primary">编辑</button>
              </div>
            </div>
          </form>
      </div>
    </div>
  </div>
</div>
<!-- 删除相册：弹出框 -->
<div class="modal fade" id="deleteAlbum" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content" style="text-align:center">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Do you want to delete this album?</h4>
      </div>
      <div class="modal-body">
          <form action="/photo/delete/{{$cover -> id}}" method="post" style="display: inline-block;">
            {{csrf_field()}}
            <button type="submit" class="btn btn-danger">Dlete</button>
          </form>
          <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
      </div>
    </div>
  </div>
</div>
<!-- 照片显示 -->
<div class="row  masonry">
@foreach($images as $key => $value) 
    <div class="col-md-3 col-sm-4 photo  item">
      <div class="panel panel-default">
        <div class="panel-body">
          <img class="img-responsive" src="{{$value -> src}}">
          <p class="photo-name">{{$value-> name}}</p>
          <p class="photo-intro">{{$value -> intro}}</p>
          <!-- 编辑照片：弹出框按钮 -->
          <span class="glyphicon glyphicon-cog photo-conf"  data-toggle="modal" data-target="#editPhoto{{$value -> id}}"></span>
        </div>
      </div>
    </div>
<!-- 编辑照片：弹出框 -->
  <div class="modal fade" id="editPhoto{{$value -> id}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">编辑图片</h4>
        </div>
        <div class="modal-body">
            <form action="/photo/image-edit/{{$value -> id}}" method="post">
              <div class="form-group">
                  <input type="text" class="form-control" name="name" value="{{$value-> name}}">
              </div>
              <div class="form-group">
                  <input type="text" class="form-control" name="intro" value="{{$value -> intro}}">
              </div>
              {{csrf_field()}}
              <button type="submit" class="btn btn-primary">Edit</button>
            </form>
            <form action="/photo/image-delete/{{$value -> id}}" method="post" style="float:right;position:relative;top:-35px">
              {{csrf_field()}}
              <button type="submit" class="btn btn-danger">Delete</button>
            </form>
        </div>
      </div>
    </div>
  </div>
@endforeach
</div>

<!--瀑布流-->
<script>
 var container = $('.masonry');
  container.imagesLoaded(function() {
    container.masonry({
    itemSelector: '.item',
    isAnimated: true,
    });
});

$(function(){
  $('.flash-message').click(function(){
    $(this).addClass('hide');
  });
});
</script>
</body>
</html>
